<template>
  <div>
    <div>
      <RHTable :RHTable="table" ref="r_h_table"></RHTable>
    </div>
    <!--弹出框-->
    <div>
      <el-dialog
        :close-on-click-modal="false"
        :title="dialog.title"
        :visible.sync="dialog.dialogFormVisible"
        @close="resetForm"
      >
        <el-form :model="form" :rules="rules" ref="role_form">
          <el-form-item label="角色名称" prop="roleName">
            <el-input autocomplete="off" v-model="form.roleName"></el-input>
          </el-form-item>
          <el-form-item label="角色模块"></el-form-item>
          <div style="margin-top: -20px;">
            <RHTree :RHTree="tree" ref="r_h_tree"></RHTree>
          </div>
        </el-form>
        <div class="dialog-footer" slot="footer">
          <el-button @click="dialog.dialogFormVisible = false">取 消</el-button>
          <el-button @click="submitForm()" type="primary">确 定</el-button>
        </div>
      </el-dialog>
    </div>
  </div>
</template>
<script>
import RHTable from "@/common/RHTable/index.vue";
import RHTree from "@/common/Tree/index.vue";
import * as service from "@/api/role";

export default {
  name: "role_index",
  data: function() {
    return {
      param: {},
      table: {
        url: this.$store.state.url.user + "api/users/renHaiRole/getRoleList",
        header: {
          show: true,
          btn: [{ value: "新增", click: this.show }]
        },
        columns: [
          { fieId: "roleId", title: "ID" },
          { fieId: "roleName", title: "角色名称" },
          { fieId: "createTime", title: "创建时间" },
          { fieId: "updateTime", title: "修改时间" }
        ],
        columnsBtn: [
          { value: "修改", click: this.updatePre, size: "mini" },
          { value: "删除", click: this.delete, size: "mini" }
        ],
        // 分页
        paging: true
      },
      tree: {
        showCheckbox: true,
        key: "moduleId",
        url:
          this.$store.state.url.user +
          "api/users/renHaiModule/getListTree.action",
        titleShow: false,
        defaultProps: {
          children: "children",
          label: "moduleName"
        }
      },
      dialog: {
        dialogFormVisible: false,
        title: "添加模块"
      },
      form: {
        roleId: "",
        roleName: "",
        roleType: "",
        moduleIds: []
      },
      rules: {
        roleName: [
          { required: true, message: "请输入角色名称", trigger: "blur" },
          {
            min: 2,
            max: 10,
            message: "长度在 2 到 10 个字符",
            trigger: "blur"
          }
        ]
      }
    };
  },
  methods: {
    show() {
      this.dialog.dialogFormVisible = true;
      this.$set(this.param, "restForm", this.form);
    },
    resetForm() {
      this.$refs.r_h_tree.resetChecked();
      this.form = this.param["restForm"];
    },
    submitForm() {
      const that = this;
      this.$refs["role_form"].validate(valid => {
        if (valid) {
          that.form.moduleIds = that.$refs.r_h_tree.getCheckedKeys();
          if (that.form.moduleIds.length === 0) {
            that.$util.message({ state: 2, msg: "请选择模块" });
            return false;
          }
          service.saveUpdate(that.form).then(function(data) {
            that.$util.message(data);
            //刷新表格
            that.$refs.r_h_table.refresh();
            //关闭弹窗
            that.dialog.dialogFormVisible = false;
          });
        } else {
          return false;
        }
      });
    },
    updatePre(param) {
      this.$set(this.param, "restForm", this.form);
      service.details(param).then(data => {
        this.dialog.dialogFormVisible = true;
        this.form = this.$util.formInitialize(this.form, data.entity);
        setTimeout(() => {
          this.$refs.r_h_tree.setCheckedKeys(data.entity.moduleIds);
          this.$refs.r_h_tree.setExpandedKeys(data.entity.moduleIds);
        });
        this.$set(this.param, "updateForm", this.form);
      });
    },
    delete(param) {
      const that = this;
      that.$util.messageBox({ msg: "确定删除？" }, function() {
        service.del({ roleId: param.roleId }).then(function(data) {
          if (data && data.state === 1) {
            that.$util.message(data);
          }
          //刷新表格
          that.$refs.r_h_table.refresh();
        });
      });
    }
  },
  components: {
    RHTable,
    RHTree
  }
};
</script>

<style scoped></style>
